<!-- 网关节点的表单 -->
<template>
    <div></div>
</template>

<script lang="ts">
    import { defineComponent, ref, watch } from 'vue'
    import { cloneDeep } from 'lodash-es'
    interface gatewayNodeForm {
        // TODO 网关节点表单的接口，开发该组件时定义
        [key: string]: any
    }
    export default defineComponent({
        props: {
            processNodeForm: {
                type: Object,
                default: () => ({})
            }
        },
        emits: ['change'],
        setup(props, { emit }) {
            const form = ref<gatewayNodeForm>({})
            // 从processNodeForm属性中，获取当前组件需要的表单数据，构造一个新的表单
            function initForm() {
                // TODO 构造网关节点表单的逻辑
            }
            // 初始化时，构造一下网关节点表单
            initForm()
            watch(
                () => props.processNodeForm,
                () => {
                    // processNodeForm发生变化时，重新初始化一下网关节点表单
                    initForm()
                }
            )

            // 表单数据发生变化，向组件外抛出change事件
            function handleFormChange() {
                emit('change', cloneDeep(form.value))
            }

            return {
                // 组件属性
                form,

                // 组件方法
                handleFormChange
            }
        }
    })
</script>
